<template>
    <div class="admin">
       
        <main>
            <h1>后台管理系统</h1>
            <el-form>
                <el-form-item>
                    <el-input
                        v-model="form.username"
                        placeholder="请输入账号"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                        v-model="form.password"
                        type="password"
                        placeholder="请输入密码"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                        style="width: 100%"
                        @click="submit"
                        type="primary"
                    >
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </main>
    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue';
import request from '@/api';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const router = useRouter();
const form = reactive({
    username: '',
    password: '',
});
const submit = () => {
    request({
        url: '/login',
        method: 'post',
        data: {
            ...form,
            type: 0,
        },
    }).then(res => {
        if (res.success) {
            ElMessage.success('登录成功');
            window.localStorage.setItem('adminToken', res.data.token);
            router.push('/admin');
        } else {
            ElMessage.error(res.msg);
        }
    });
};
</script>
<style scoped lang="less">
main {
    width: 300px;
    // box-shadow: 0 0 5px #ccc;
    border: 1px solid #000;
    padding: 70px 40px;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 20px;
    h1{
        text-align: center;
        margin-top: 0;
        margin-bottom: 50px;
    }
   
}
.admin {
    height: 100vh;
    background-image: url('./imgs/2.webp') ;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

</style>
